<template>
    <div class="page-root">
        <h2 class="main-title">客户床位使用详情管理</h2>
        <!-- 查询表单 -->
        <el-form :inline="true" :model="searchForm" class="search-bar">
            <el-form-item label="客户姓名">
                <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable />
            </el-form-item>
            <el-form-item label="使用开始时间">
                <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="YYYY-MM-DD" clearable />
            </el-form-item>
            <el-form-item label="使用状态">
                <el-select v-model="searchForm.status" placeholder="全部" style="width:100px;">
                    <el-option label="全部" value="" />
                    <el-option label="使用中" value="使用中" />
                    <el-option label="已结束" value="已结束" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="init">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="tableData" v-loading="loading" border style="width: 100%; margin-top: 2%; background: #f5f7fa;"
            :header-cell-style="{ background: '#f9fafc', color: '#333', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="client.name" label="姓名" min-width="8%">
                <template #default="scope">{{ scope.row.client.name }}</template>
            </el-table-column>
            <el-table-column prop="client.gender" label="性别" min-width="5%">
                <template #default="scope">{{ scope.row.client.gender }}</template>
            </el-table-column>
            <el-table-column prop="client.age" label="年龄" min-width="6%">
                <template #default="scope">{{ scope.row.client.age }}</template>
            </el-table-column>
            <el-table-column prop="client.phone" label="联系电话" min-width="12%">
                <template #default="scope">{{ scope.row.client.phone }}</template>
            </el-table-column>
            <el-table-column prop="client.checkinDate" label="入住日期" min-width="14%">
                <template #default="scope">{{ scope.row.client.checkinDate }}</template>
            </el-table-column>
            <el-table-column prop="bedUsage.startDate" label="使用开始时间" min-width="13%">
                <template #default="scope">{{ scope.row.bedUsage.startDate }}</template>
            </el-table-column>
            <el-table-column prop="bedUsage.endDate" label="结束时间" min-width="13%">
                <template #default="scope">{{ scope.row.bedUsage.endDate ? scope.row.bedUsage.endDate : '-' }}</template>
            </el-table-column>
            <el-table-column prop="bedUsage.status" label="使用状态" min-width="9%">
                <template #default="scope">
                    <el-tag :type="scope.row.bedUsage.status === '使用中' ? 'success' : 'info'" size="small">
                        {{ scope.row.bedUsage.status }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="20%">
                <template #default="scope"><el-button
                        v-if="scope.row.bedUsage.status === '使用中'" type="primary"
                        size="small" @click="openEditDialog(scope.row)">
                        修改结束时间
                    </el-button>
                    <el-button v-if="scope.row.bedUsage.status === '使用中'" type="warning" size="small"
                        @click="openExchangeDialog(scope.row)" style="margin-left:2%;" >床位调换</el-button>
                    <el-button v-else type="info" size="small" disabled style="width:72%;">已结束</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-bar">
            <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.size"
                :total="pagination.total" :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange" @current-change="handlePageChange" />
        </div>

        <!-- 修改结束时间弹窗 -->
        <div></div>
        <EditEndTimeDialog ref="editDialogRef" @refresh="init" />

        <!-- 床位调换弹窗 -->
        <ExchangeBedDialog ref="exchangeDialogRef" @refresh="init" />
    </div>
</template>
  
<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import EditEndTimeDialog from '@/components/bedUsage/EditEndTimeDialog.vue'
import ExchangeBedDialog from '@/components/bedUsage/ExchangeBedDialog.vue'

const loading = ref(false)
const tableData = ref([])
const pagination = reactive({
    page: 1,
    size: 10,
    total: 0
})
const searchForm = reactive({
    name: '',
    dateRange: [],
    status: ''
})
const editDialogRef = ref()
const exchangeDialogRef = ref()

const getQueryParams = () => ({
    name: searchForm.name,
    checkinDateStart: searchForm.dateRange[0] || '',
    checkinDateEnd: searchForm.dateRange[1] || '',
    status: searchForm.status,
    page: pagination.page,
    size: pagination.size
})

const init = async () => {
    loading.value = true
    try {
        const { data } = await axios.get('http://localhost:9000/bedUsage/page', { params: getQueryParams() })
        if (data.status === 200) {
            tableData.value = data.data || []
            pagination.total = data.total || 0
        } else {
            tableData.value = []
            pagination.total = 0
            ElMessage.warning(data.msg)
        }
    } catch (err) {
        tableData.value = []
        ElMessage.error('查询失败')
    } finally {
        loading.value = false
    }
}
const handlePageChange = (p) => { pagination.page = p; init() }
const handleSizeChange = (s) => { pagination.size = s; pagination.page = 1; init() }
const handleReset = () => {
    searchForm.name = ''
    searchForm.dateRange = []
    searchForm.status = ''
    pagination.page = 1
    init()
}
const openEditDialog = (row) => { editDialogRef.value.open(row) }
const openExchangeDialog = (row) => { exchangeDialogRef.value.open(row) }

onMounted(init)
</script>
  
<style scoped>
.page-root {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    background: #fff;
    padding: 0 3%;
}

.main-title {
    font-size: 1.7em;
    font-weight: bold;
    color: #333;
    margin-bottom: 2%;
    margin-top:0%;
}

.search-bar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
    margin-bottom: 1.5%;
}

.pagination-bar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 2%;
    margin-bottom: 2%;
}
</style>
  